<template>
    <div class="login_page">
        <div class="login_from">
              <p class="form_title">账号：</p>
              <input class="form_input" v-model="username" type="text" placeholder="账号">
              <p class="form_title">密码：</p>
              <input class="form_input" type="password" placeholder="密码">
              <br/>
              <div class="login_btn register_btn" @click="go_register">注  册</div>
              <div class="login_btn" @click="login">登  录</div>
        </div>
    </div>
</template>
<script>
import {_fakeLogin} from '../api'
import Message from '../components/message'
export default {
    name: 'login',
    data () {
        return {
           username: ''
        }
    },
    methods: {
      // 登陆
      login (key) {
        let vm = this
        if (!vm.username) return
        _fakeLogin({
          name: vm.username
        }).then(res => {
          if (res.code > 0) {
            localStorage.setItem("userId", res.data.userId)
            localStorage.setItem("token", res.data.token)
            new Message({
              type: 'success',
              text: '登录成功！'
            })
            vm.$router.push({name: "home"})
          } else {
            new Message({
              type: 'error',
              text: res.message
            })
          }
        })
        
      },

      // 去注册
      go_register () {
        this.$router.push({name: "register"})
      }
    }
}
</script>
<style lang="less" scoped>
 .login_page {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg.jpg');
    background-size:cover;
    .login_from {
      width: 80%;
      height: 380px;
      border: 1px solid #5a825d;
      border-radius: 12px;
      position: relative;
      top: calc(~"50% - 200px");
      left: 10%;
      background-color: rgba(200, 200, 200, .2);
      text-align: center;
      box-sizing: border-box;
      padding: 40px 10px 20px 10px;

      .form_title {
        font-size: 26px;
        text-align: left;
        padding-left: 20px;
        color: #334745;
      }
      .form_input {
        font-size: 20px;
        width: 80%;
        padding: 0 10px 0 10px;
        margin: 10px 0 30px 0 ;
        outline:none;
        border: none;
        line-height: 30px;
        color:#ff5c00;
        border-radius: 8px;
      }
      .login_btn {
        background-color: #ff5c00;
        font-size: 20px;
        display: inline-block;
        padding: 8px 26px 10px;
        color: #fff;
        line-height: 1;
        text-decoration: none;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.25);
        position: relative;
        overflow: visible;
        width: auto;
        margin-top: 40px;
      }
      .register_btn {
        background-color: #2f4e47;
        margin-right: 20px;
      }
    }
  }
</style>


